<template>
   <div class="productWrapper" >
           <div  class="infoWrapper" >
                <div class="imageWrapper">
                    <div class="LazyLoad is-visible">
                        <img class="image" :src="product.small_image" alt="">
                    </div>
                </div>
                <div class="nameWrapper" @click="xiangqing(product2.vid,product2.vname,product2.price,product2.pzleixing,1)">
                    <div class="name">
                        <span class="nameTag nameText">{{product2.vname}}</span>
                    </div>
                    <div class="spec">
                        {{product2.price}}积分
                    </div>
                    <div class="tagsWrapper">
                        <div class="H1B9Rvu"></div>
                    </div>
                </div>
                <div class="priceWrapper">
                    <div class="price">
                        {{product2.price|moneyFormat}}/斤
                    </div>
                    <div class="iconCartWrapper" @click="addToCart(product2)">
                       <van-icon name="cart-o" />
                    </div>
                </div>
            </div> 
        
    </div>
</template>
<script>
   //1.引入
import { getHomeData } from './../../../../service/api/index.js'  //拿到index.js 里面的getHomeData方法
import { Icon } from 'vant';
import  {mapMutations,mapState} from 'vuex'
import {Toast} from 'vant'
import {addGoodsToCart} from './../../../../service/api/index'
     export default {
        name:"TabItemOne",
        
        data(){
            return{
               product:''
            }
        },
        props:{
            product2:Object
        },
        computed:{
            ...mapState(["userInfo"])
       },

        methods:{
        ...mapMutations(["ADD_GOODS"]),
          async addToCart(product2){
       //    console.log(this.$router);
                if (this.userInfo.token) { //已经登录
                    //调用addGoodsToCart将商品信息同步到服务器端 
                  //  console.log(product.vname);
                    //用户id,蔬菜id,蔬菜名，蔬菜价格
                     let result = await addGoodsToCart(this.userInfo.token,product2.vid,product2.vname,product2.price,product2.pzleixing);
                     console.log(result);
                     if (result.status===200) {
                          this.ADD_GOODS({  
                           goodsId:product2.vid,
                           goodsName:product2.vname,
                           goodsPrice:product2.price,
                           pzleixing:product2.pzleixing
                       });
                       //提示用户
                       Toast({
                          message:'添加到购物车成功',
                          duration:800
                       });       
                     }
                    }else{
                        this.$router.push('/login');
                     }
              },        //   ---async
             xiangqing($id,$name,$price,$pzleixing,$fromsy){
                //  console.log($id);
                  this.$router.push({
                       path:'/dashboard/xiangqing',query:{vid:$id,vname:$name,price:$price,pzleixing:$pzleixing,fromsy:$fromsy}
                  })
            }
        },
      


       created(){
           
                   //暂时借用别的接口图片
                     getHomeData().then((response)=>{
                     if (response.success) {
                      this.product = response.data.list[3].product_list[0];
                   //  console.log(this.product);
                   }
              }).catch(error=>{
                   // todo......
                    console.log(error);
              })
         }   //  ----createed

  }
</script>
<style  lang="less" scoped>
   .productWrapper {
        position: relative;
        padding: 0.8125rem 0;
        background: #FFF;
    }

    .productWrapper + .productWrapper {
        border-top: solid 1px #EEEEEE;
    }

    .imageWrapper {
        position: absolute;
        left: 0;
        top: 0.2375rem;
        width: 4.0625rem;
        height: 4.0625rem;
        overflow: hidden;
        border-radius: 4px;
    }

    .image {
        width: 100%;
        height: 100%;
        display: block;
    }

    .noticeGreen, .noticeGray {
        position: absolute;
        height: 100%;
        text-align: center;
    }

    .noticeGreen {
        background: #76DA96;
        color: #FFF;
    }

    .noticeGray {
        background: rgba(255, 255, 255, 0.6);
    }

    .noticeGray span {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        display: inline-block;
        width: 80%;
        text-align: center;
        color: #FFF;
        font-size: 0.75rem;
        height: 1.25rem;
        line-height: 1.25rem;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 1.25rem;
    }

    .infoWrapper {
        position: relative;
        padding: 0 0.625rem 0.4rem 4.6625rem;
        border-bottom: 1px solid #e0e0e0;
    }

    .nameWrapper {
        min-height: 2.1875rem;
    }

    .name {
        line-height: 1.25rem;
        word-break: break-all;
        font-size: 0.9375rem;
        color: #333333;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .name .nameTag {
        margin-right: 0.125rem;
        vertical-align: middle;
    }
    .name .nameText {
        vertical-align: middle;
    }

    .spec {
        min-height: 1.25rem;
        line-height: 1.25rem;
        font-size: 0.75rem;
        color: #999999;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .tagsWrapper {
        margin-top: 0.1875rem;
        max-height: 1.0625rem;
        line-height: 0.8125rem;
        overflow: hidden;
    }

    .H1B9Rvu {
        height: 1rem;
    }

    .tag + .tag {
        margin-left: 0.3125rem;
    }

    .priceWrapper {
        position: relative;
    }

    .price {
        display: inline-block;
        height: 1.875rem;
        line-height: 1.875rem;
        font-weight: bold;
        font-size: 0.75rem;
        color: #FE6263;
    }

    .originPrice {
        display: inline-block;
        margin-left: 0.3125rem;
        height: 1.875rem;
        line-height: 1.875rem;
        text-decoration: line-through;
        font-size: 0.6875rem;
        color: #B2B2B2;
    }

    .iconCartWrapper {
        position: absolute;
        top: 0;
        right: 0;
        width: 1.875rem;
    }

    .icon {
        fill: #999;
        width: 1rem;
        height: 1rem;
    }

    .iconCart {
        display: block;
        width: 1.875rem;
        height: 1.875rem;
    }
</style>